<template>
  <view class="component-box" :style="[outModuleCss]" v-if="goodsList.length">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="diy-product" :class="!showModuleName ? 'add-padding' : ''">
      <view class="section-header" v-if="showModuleName" @click="skipToLink">
        <view class="module-header" v-if="showModuleName">
          <view class="flex">
            <view class="module-name" :style="[moduleNameCss]">{{
              showModuleName ? moduleName : ""
            }}</view>

            <view
              v-if="countDown.length"
              class="countDown"
              :style="[{ color }]"
            >
              <view v-if="countDown[0]"> {{ countDown[0] }}天 </view>
              <view class="m" :style="[{ backgroundColor }]">{{
                countDown[1]
              }}</view
              >:<view class="m" :style="[{ backgroundColor }]">{{
                countDown[2]
              }}</view
              >:<view class="m" :style="[{ backgroundColor }]">{{
                countDown[3]
              }}</view>
              <view> {{ countDown[4] ? "后开始" : "后结束" }}</view>
            </view>
          </view>
          <view
            class="more"
            :style="[moduleMoreCss]"
            v-if="propsData.params.showMoreText"
          >
            <span>{{ propsData.params.moreText }}</span>
            <i class="iconfont icon-arrow-right"></i>
          </view>
        </view>
        <view :style="[heaerBgCss]" class="module-bg"></view>
      </view>
      <view class="section-body">
        <defaultTem
          v-if="styleType == 1"
          :propsData="propsData"
          :goodsList="goodsList"
          :goodsItemSpace="goodsItemSpace"
          @clickBuyBtn="clickBuyBtn"
          @toGoodDetail="toGoodDetail"
          @scrollToEnd="scrollToEnd"
        ></defaultTem>
        <columnTem
          v-if="styleType == 3"
          :propsData="propsData"
          :goodsList="goodsList"
          :goodsItemSpace="goodsItemSpace"
          @clickBuyBtn="clickBuyBtn"
          @toGoodDetail="toGoodDetail"
          @scrollToEnd="scrollToEnd"
        ></columnTem>
      </view>
    </view>

    <!-- 添加购物车数组 -->
    <goodsAddCart :good="goodsOfAdd"></goodsAddCart>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";
import { seckillActivity } from "@/api/seckill";
import goodsAddCart from "../goodsAddCart/index.vue";
import defaultTem from "./templates/defaultTem.vue";
import columnTem from "./templates/column.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  components: {
    goodsAddCart,
    defaultTem,
    columnTem,
  },

  mixins: [diyMixin], //混入文件
  data() {
    return {
      timer: null,
      goodsList: [],
      id: null,
      end_time: null,
      start_time: null,

      countDown: [],

      goodsOfAdd: {}, // 添加到购物车的商品
    };
  },

  computed: {
    color() {
      return this.propsData.params.countDownCss.color;
    },

    backgroundColor() {
      return this.propsData.params.countDownCss.backgroundColor;
    },

    styleType() {
      return this.propsData.params.styleType;
    },
    moduleName() {
      return this.propsData.params.moduleName;
    },

    productDataFrom() {
      return this.propsData.params.productDataFrom || "select";
    },
    classifyId() {
      return this.propsData.params.classifyData;
    },
    selectData() {
      return this.propsData.params.selectData;
    },
    showBuyBtn() {
      return this.propsData.params.showBuyBtn;
    },
    showPrice() {
      return this.propsData.params.showPrice;
    },
    showSales() {
      return this.propsData.params.showSales;
    },
    showModuleName() {
      return this.propsData.params.showModuleName;
    },
    goodsItemSpace() {
      let out = this.propsData.params.goodsItemOutSpace || "0";
      let inner = this.propsData.params.goodsItemInnerSpace || "0";
      let styleType = this.propsData.params.styleType || 1;
      let css = {};
      out = out * 2;
      inner = inner * 2;
      if (out) {
        if (styleType == 1) {
          css["margin"] = `0 0 ${out}rpx 0`;
        }
        if (styleType == 3) {
          css["margin"] = `0 ${out}rpx ${out}rpx ${out}rpx`;
        }
        if (styleType == 2 || styleType == 4) {
          css["margin"] = `0 ${out}rpx ${out}rpx 0`;
        }
        if (styleType == 5) {
          css["margin"] = `0 ${out}rpx 0 0`;
        }
      }
      if (inner) {
        css["padding"] = `${inner}rpx`;
      }
      return css;
    },
    moduleNameCss() {
      let style = this.propsData.params.moduleNameCss;
      if (style?.fontNum) {
        style.fontSize = `${style.fontNum * 2}rpx`;
      }
      return style;
    },
    moduleMoreCss() {
      let style = this.propsData.params.moduleMoreCss;
      if (style?.fontNum) {
        style.fontSize = `${style.fontNum * 2}rpx`;
      }
      return style;
    },
    heaerBgCss() {
      if (!this.propsData.params?.headerBg) return "";
      let style = JSON.parse(JSON.stringify(this.propsData.params.headerBg));

      if (!style.useBackground) {
        return {
          background: "inherit",
        };
      }
      return style;
    },
  },

  onUnload() {
    clearInterval(this.timer);
  },

  created() {
    let { activeId } = this.propsData.params;

    seckillActivity({
      activeId,
    }).then((res) => {
      if (!res.code && res.data.list.length) {
        let { end_time, start_time, seckill_activity_goods } = res.data.list[0],
          { showProductLength } = this.propsData.params;

        this.goodsList = seckill_activity_goods.filter(
          (el, i) => i <= showProductLength
        );

        clearInterval(this.timer);
        this.countDownDataItem(end_time * 1000, start_time * 1000);
        this.timer = setInterval(() => {
          this.countDownDataItem(end_time * 1000, start_time * 1000);
        }, 1000);
      }
    });
  },

  methods: {
    formatNumber(n) {
      n = n.toString();
      return n[1] ? n : "0" + n;
    },

    countDownDataItem(endTime, startTime) {
      let currentTime = new Date().getTime(),
        activeTime = endTime,
        item = [],
        is = 0; // 0距离结束 1距离开始

      if (currentTime < startTime && startTime - currentTime > 0) {
        // 如果活动未开始，对时间进行处理
        activeTime = startTime;
        is = 1;
      }

      if (activeTime - currentTime > 0) {
        // 如果活动未结束，对时间进行处理

        let time = (activeTime - currentTime) / 1000;

        // 获取天、时、分、秒
        let day = parseInt(time / (60 * 60 * 24)),
          hou = this.formatNumber(parseInt((time % (60 * 60 * 24)) / 3600)),
          min = this.formatNumber(
            parseInt(((time % (60 * 60 * 24)) % 3600) / 60)
          ),
          sec = this.formatNumber(
            parseInt(((time % (60 * 60 * 24)) % 3600) % 60)
          );

        item = [day, hou, min, sec, is];
      } else {
        item = [];
        clearInterval(this.timer);
      }

      this.countDown = item;
    },

    // api获取商品数据
    async getProducts(params) {
      const res = await this.$allrequest.diy.getGoodsList(params);
      if (res.code == 0) {
        if (params.isLoadMore) {
          this.goodsList = [...this.goodsList, ...res.data.list];
        } else {
          this.goodsList = res.data.list;
        }
      }
    },

    // 点击添加购物车按钮回调
    clickBuyBtn(e) {
      let item = e.item;
      let goods = Object.assign({}, item);
      this.goodsOfAdd = goods;
      setTimeout(() => {
        this.goodsOfAdd = {};
      }, 1);
    },

    // 跳转商品详情
    toGoodDetail(e) {
      if (!e) return;
      let id = e.id;
      uni.navigateTo({
        url: `/goods/goods/goods?id=${id}&is_seckill=1`,
      });
    },

    skipToLink() {
      let { activeId } = this.propsData.params;
      uni.navigateTo({
        url: `/seckill/list/index?activeId=${activeId}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.component-box {
  width: 100%;
  position: relative;
  .diy-product {
    width: 100%;
    .section-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      padding: 0 3.2vw;
      position: relative;

      .module-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .module-name {
          font-size: 4.267vw;
          font-weight: 600;
          color: #262626;
          margin-bottom: 0;
        }
        .more {
          display: flex;
          align-items: center;
          font-size: 3.2vw;
          font-weight: 400;
          color: #888888;
          margin-bottom: 0;
          line-height: 4.267vw;
          .iconfont {
            font-size: 2.267vw;
          }
        }
      }
    }
    .section-body {
      width: 100%;
    }
  }
  .add-padding {
    padding-top: 3.2vw;
  }

  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}

.flex {
  display: flex;
  align-items: center;
  flex: 1;
}

.countDown {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  margin-left: 7px;
  font-weight: bold;

  .m {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4rpx;
    width: 32rpx;
    height: 32rpx;
    color: #fff;
    border-radius: 3px;
    font-weight: bold;
  }
}
</style>
